{% extends'case/base.html' %}

{#{% block styles %}#}
{#  {{ super() }}#}
{#  <link href="{{ url_for('static', filename='css/case/http.css') }}" rel="stylesheet">#}
{#{% endblock styles %}#}

{#{% block app_content %}#}
{#  {{ super() }}#}
{#  {% include 'case/http/_cookies_manager.html' %}#}
{#{% endblock app_content %}#}

{% block div_case_up %}
<div class="row container-fluid pr-0 mr-0 pl-0 ml-0">
  <ul class="col-8 nav nav-pills" id="pills-main-tab-{{ case.id }}" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-basic-tab-{{ case.id }}" data-toggle="pill" href="#pills-basic-{{ case.id }}" role="tab">基本</a>
    </li>
{#    <li class="nav-item">#}
{#      <a class="nav-link" id="pills-advanced-tab-{{ case.id }}" data-toggle="pill" href="#pills-advanced-{{ case.id }}" role="tab">高级</a>#}
{#    </li>#}
  </ul>
  <div class="col-4 btn-toolbar d-flex justify-content-end pr-0 pb-1" role="toolbar">
    <div class="btn-group mr-5" role="group">
      <button id="btn-case-cookie-{{ case.id }}" type="button" class="btn btn-link" {{ 'disabled' if not case.id }} >Cookies</button>
    </div>
  {#        <div class="btn-group mr-2" role="group">#}
  {#          <button id="btn-case-delete" type="button" class="btn btn-warning" {{ 'disabled' if not case.id }} data-case-id="{{ case.id }}">删除</button>#}
  {#        </div>#}
    <div class="btn-group mr-2" role="group">
      <button id="btn-case-save-{{ case.id }}" type="button" class="btn btn-primary" data-case-id="{{ case.id }}">保存</button>
    </div>
    <div class="btn-group" role="group">
      <button id="btn-case-send-{{ case.id }}" type="button" class="btn btn-success" {{ 'disabled' if not case.id }} data-case-id="{{ case.id }}" >
        发送<span class="spinner-grow spinner-grow-sm" id="btn-case-send-spinner-{{ case.id }}" style="display: none;"></span>
      </button>
    </div>
  </div>
</div>
<div class="tab-content" id="pills-tabContent-main-{{ case.id }}">
  <div class="tab-pane fade show active" id="pills-basic-{{ case.id }}" role="tabpanel">
    <div class="card">
      <div class="card-body p-0">
        <label class="mb-0"><small>Web服务器</small></label>
        <div class="row">
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="select-protocol-{{ case.id }}">协议</label>
            </div>
            <select class="form-control" id="select-protocol-{{ case.id }}">
              <option {{ "selected" if case.specific_case.protocol == "HTTP" }}>HTTP</option>
              <option {{ "selected" if case.specific_case.protocol == "HTTPS" }}>HTTPS</option>
            </select>
          </div>
          <div class="col-8 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-domain-{{ case.id }}">服务器名称或IP</label>
            </div>
            <input id="input-domain-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.domain }}">
          </div>
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-port-{{ case.id }}">端口</label>
            </div>
            <input id="input-port-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.port }}">
          </div>
        </div>
        <label class="mb-0"><small>HTTP请求</small></label>
        <div class="row mb-1">
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="select-method-{{ case.id }}">方法</label>
            </div>
            <select id="select-method-{{ case.id }}" class="form-control">
              <option {{ "selected" if case.specific_case.method == "GET" }}>GET</option>
              <option {{ "selected" if case.specific_case.method == "POST" }}>POST</option>
              <option {{ "selected" if case.specific_case.method == "DELETE" }}>DELETE</option>
              <option {{ "selected" if case.specific_case.method == "PUT" }}>PUT</option>
              <option {{ "selected" if case.specific_case.method == "PATCH" }}>PATCH</option>
              <option {{ "selected" if case.specific_case.method == "OPTIONS" }}>OPTIONS</option>
              <option {{ "selected" if case.specific_case.method == "HEAD" }}>HEAD</option>
            </select>
          </div>
          <div class="col-8 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-path-{{ case.id }}">路径</label>
            </div>
            <input id="input-path-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.path }}">
          </div>
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-content-encoding-{{ case.id }}">内容编码</label>
            </div>
            <input id="input-content-encoding-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.encoding }}">
          </div>
        </div>
        <div class="row m-0">
          <ul class="nav nav-tabs col-4" id="myTab-param-{{ case.id }}" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="param-tab-{{ case.id }}" data-toggle="tab" href="#tab-param-{{ case.id }}" role="tab">参数</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="message-body-tab-{{ case.id }}" data-toggle="tab" href="#tab-message-body-{{ case.id }}" role="tab">消息体数据</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="header-tab-{{ case.id }}" data-toggle="tab" href="#tab-header-{{ case.id }}" role="tab">请求头</a>
            </li>
{#            <li class="nav-item">#}
{#              <a class="nav-link" id="file-upload-tab-{{ case.id }}" data-toggle="tab" href="#tab-file-upload-{{ case.id }}" role="tab">文件上传</a>#}
{#            </li>#}
          </ul>
          <div class="col-8">
            <label class="btn btn-sm d-flex {{ 'active' if case.specific_case.content_type == CONTENT_TYPE.FORM_DATA }}">
              <input type="checkbox" class="align-self-center" id="input-content-type-{{ case.id }}" {{ 'checked' if case.specific_case.content_type == CONTENT_TYPE.FORM_DATA }}>对post使用multipart/form-data
            </label>
          </div>
        </div>
        <div class="tab-content" id="myTabContent-param-{{ case.id }}">
          <div class="tab-pane fade show active" id="tab-param-{{ case.id }}" role="tabpanel">
            <div id="table-parameter-{{ case.id }}" class="d-flex justify-content-center">
              <div id="div-table-parameter-spinner-{{ case.id }}" class="spinner-border text-primary m-5" role="status">
                <span class="sr-only">加载中Loading...</span>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="tab-message-body-{{ case.id }}" role="tabpanel">
            <div class="container-fluid ace-message-body" id="div-ace-message-body-{{ case.id }}">{{ case.specific_case.message_body }}</div>
          </div>
          <div class="tab-pane fade" id="tab-header-{{ case.id }}" role="tabpanel">
            <div id="table-header-{{ case.id }}" class="d-flex justify-content-center">
              <div id="div-table-header-spinner-{{ case.id }}" class="spinner-border text-primary m-5" role="status">
                <span class="sr-only">加载中Loading...</span>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="tab-file-upload-{{ case.id }}" role="tabpanel">
            <div id="table-file-upload-{{ case.id }}" class="d-flex justify-content-center">
              <div id="div-table-file-upload-spinner-{{ case.id }}" class="spinner-border text-primary m-5" role="status">
                <span class="sr-only">加载中Loading...</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-advanced-{{ case.id }}" role="tabpanel">
    <div class="card">
      <div class="card-body p-0">
        <p>高级内容</p>
      </div>
    </div>
  </div>
</div>
{% include 'case/http/_cookies_manager.html' %}
{% endblock div_case_up %}

{#{% block scripts %}#}
{#  {{ super() }}#}
{#  <script src="{{ url_for('static', filename='js/case/http/http.js') }}"></script>#}
{#  <script src="{{ url_for('static', filename='js/case/http/_cookies_manager.js') }}"></script>#}
{#  <script>#}
    {#var data_parameters = {{ render_to_json(case.specific_case.parameters, ['name', 'value', 'url_encode', 'content_type', 'include_equals'])|safe }};#}
{#    var data_parameters = {{ render_to_json(case.specific_case.parameters)|safe }};#}
    {#var data_expectations = {{ render_to_json(case.specific_case.expectations, ['test_field', 'value', 'matching_rule', 'last_result', 'last_failure_msg'])|safe }};#}
{#    var data_expectations = {{ render_to_json(case.specific_case.expectations)|safe }};  // TODO 可能存在解析的问题#}
{#    var data_file_upload = {{ render_to_json(case.specific_case.file_upload)|safe }};#}
{#  </script>#}
{#{% endblock %}#}